<!--
* @description 
* @fileName ranking.vue
* @author huangyu
* @date 2023/03/22 10:50:02
!-->
<template>
    <div>
        <el-button type="primary" @click="clickAdd">新增数据</el-button>

        <el-table :data="list" border style="margin-top:20px;">
            <el-table-column label="排序" type="index" width="80"></el-table-column>
            <el-table-column label="游戏名称" prop="name"></el-table-column>
            <el-table-column label="生命值" prop="hp"></el-table-column>
            <el-table-column label="蓝量值" prop="mp"></el-table-column>
            <el-table-column label="职业" prop="sect"></el-table-column>
            <el-table-column label="所属帮派" prop="cianName"></el-table-column>
            <el-table-column label="所属家族" prop="houseName"></el-table-column>
            <el-table-column label="备注" prop="remake"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" plain @click="clickEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" plain @click="clickDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="userForm._id?'编辑数据':'新增数据'" :visible.sync="dialogUserForm" v-if="dialogUserForm" v-dialogDrag width="650px" @close="closeUserForm">
            <el-form  :model="userForm" label-width="120px" :rules="rules" ref="ruleForm">
                <el-form-item label="游戏名称: " prop="name">
                    <el-input v-model="userForm.name"></el-input>
                </el-form-item>
                <el-form-item label="选择门派: " prop="sect">
                    <el-select v-model="userForm.sect" v-if="!userForm._id">
                        <el-option :label="item.label" :value="item.label" v-for="(item, index) in classItemList" :key="index"></el-option>
                    </el-select>
                    <div v-else>{{userForm.sect}}</div>
                </el-form-item>
                <el-form-item label="选择帮派: ">
                    <vSelCian v-model="cianArr"></vSelCian>
                </el-form-item>
                <el-form-item label="生命值: ">
                    <el-input v-model="userForm.hp"></el-input>
                </el-form-item>
                <el-form-item label="蓝量值: ">
                    <el-input v-model="userForm.mp"></el-input>
                </el-form-item>
                <el-form-item label="备注: ">
                    <el-input v-model="userForm.remake" type="textarea"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitUserForm('ruleForm')">确认提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import { classItem } from "@/enum/zhuxian.js"
import vSelCian from "@/components/game/zhuxian/selCian.vue"
export default {
    components: {vSelCian},
    data() {
        return {
            list: [],
            classItemList: classItem,
            cianArr: [],
            userForm: {
                name: "",
                sect: "鬼王宗",
                cianId: "",
                houseId: "",
                hp: 0,
                mp: 0,
                remake: "",
            },
            dialogUserForm: false,
            rules:{
                name: [{ required: true, message: '请填写游戏名称', trigger: 'blur' }],
                sect: [{ required: true, message: '请选择职业', trigger: 'change' }],
                cianId: [{ required: true, message: '请选择帮派', trigger: 'change' }],
            }
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        clickEdit(row){
            this.userForm = row
            if(this.userForm.cianId)
                this.cianArr[0] = this.userForm.cianId
            if(this.userForm.houseId)
                this.cianArr[1] = this.userForm.houseId
            this.dialogUserForm = true
        },
        getData(){
            let params = {
                type: "getGameUser",
                api: "api-gameuser-list",
                data: {},
            }
            get('game', params).then(res => {
                if(res){
                    this.list =  res
                    console.log(this.list)
                }
            })
        },
        closeUserForm(){
            this.userForm.name = ""
            this.userForm.sect = "鬼王宗"
            this.userForm.cianId = ""
            this.userForm.houseId = ""
            this.userForm.hp = 0
            this.userForm.mp = 0
            this.userForm.remake = ""
        },
        submitUserForm(formName){
            // console.log(this.userForm)
            this.userForm.cianId = this.cianArr[0]
            this.userForm.houseId = this.cianArr[1]
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {
                        type: "getGameUser",
                        api: "api-gameuser-edit",
                        data: this.userForm,
                    }
                    get('game', params).then(res => {
                        if (res.type=='error') {
                            this.$message.error(res.msg)
                            return
                        }
                        this.$message.success("添加成功")
                        this.dialogUserForm = false
                        this.getData()
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        clickAdd(){
            this.dialogUserForm = true
        },
        clickDel(row){
            this.$confirm(`确认要删除" ${row.name} "吗？`, "提示").then(() => {
                let params = {
                    type: "getGameUser",
                    api: "api-gameuser-del",
                    data: {
                        _id: row._id
                    },
                }
                get('game', params).then(res => {
                    if(res){
                        this.$message.success("删除成功")
                        this.getData()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
        },
        // handleChange(valueArr){
        //     let length = valueArr.length
        //     if(length>=1){
        //         this.userForm.cianId = valueArr[0]
        //     }
        //     if(length==2){
        //         this.userForm.houseId = valueArr[1]
        //     }0
        // },
    },
}
</script>

<style scoped></style>